import React from "react";

import { storiesOf } from "@storybook/react";
import { text, select } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'
import { action } from '@storybook/addon-actions'

import { AiOutlineLoading3Quarters } from 'react-icons/ai'

import Switch from ".";

const boolVariants = {
  true: true,
  false: false,
};

storiesOf("Switch", module)
  .add("Switch", () => (
    <div className=''>
      left
      <Switch
        checked={select("Checked", boolVariants, false)}
        disabled={select("Disabled", boolVariants, false)}
        loading={select("Loading", boolVariants, false)}
        loadingIcon={<AiOutlineLoading3Quarters color='red' />}
        checkedChildren={text('CheckedChildren', '开')}
        unCheckedChildren={text('UnCheckedChildren', '关')}
        onClick={() => action('click')}
        onChange={() => action('change')}
      />
      right
    </div>
  ));
